import React, { Component, Fragment } from "react";
// antd
import Action from "@c/buttonAction/Index";
import { Tabs } from "antd";
// table 组件
// import TableComponent from "@c/tableData/Index";
// Store
import Store from "@/stroe/Index";
// action
import { addStatus } from "@/stroe/action/Config";
// import UserModal from "./components/UserModal";
// import UserMenuModal from "./components/UserMenuModal";
// 合并页面
import UserManagerPage from "./Users"
import GroupManagerPage  from "./User_Group";
import MenuManagerPage from "./Menu";

const { TabPane } = Tabs;

class UserManage extends Component {
    constructor(props){
        super(props);
        this.state = {
            // id
            id: "",
            // flag
            flag: false,
            // 请求参数
            pageNumber: 1,
            pageSize: 10,
            keyWork: "",
            // 表头
            tableConfig: {
                url: "userList",
                method: "get",
                checkbox: true,
                thead: [
                    { 
                        title: "姓名", 
                        dataIndex: "realname", 
                        key: "realname",
                        render: (realname, rowData) => {
                            return <a href={rowData.id}>{realname}</a>
                        }
                    },
                    { title: "账号", dataIndex: "username", key: "username", },
                    { title: "事业部", dataIndex: "department", key: "department" },
                    { title: "权限", dataIndex: "role_code", key: "role_code" },
                    { 
                        title: "操作", 
                        dataIndex: "operation", 
                        key: "operation", 
                        width: 215,
                        render: (text, rowData) => {
                            return (
                                <div className="inline-button">
                                    <Action>
                                        <Action.Button onClick={() => this.userModal({status: true, user_id: rowData.id})}>编辑</Action.Button>
                                        <Action.Button onClick={() => this.delete(rowData.id)}>删除</Action.Button>
                                    </Action>
                                </div>
                            )
                        }
                    }
                ],
                formItem: [
                    { 
                        type: "Input",
                        label: "姓名", 
                        name: "realname", 
                        placeholder: "请输入姓名"
                    },
                    { 
                        type: "SelectComponent",
                        label: "事业部", 
                        url: "departmentListAll",
                        method: "get",
                        name: "department_code",
                        propsKey: {
                            label: "name",
                            value: "code"
                        },
                        style: { width: "200px" },
                    },
                ]
            },
            // 表的数据
            data: []
        };
    }
    /** 生命周期挂载完成 */
    componentDidMount(){
        Store.subscribe(() =>
            console.log(Store.getState())
        );

        Store.dispatch(addStatus({
            label: "所有",
            value: "all"
        }))

        // Store.dispatch(uploadStatus("aaaaa", false))
    }
    // 获取子组件实例
    getChildRef = (ref) => {
        this.tableComponent = ref; // 存储子组件
    }
    // 获取弹窗子组件实例
    getUserModalRef = (ref) => { this.child = ref }
    // 显示弹窗
    userModal = (data) => {
        this.child.visibleModal(data);
    }

    /** 删除 */
    delete = (id) => {
        this.tableComponent.onHandlerDelete(id)
    }

    // 获取用户菜单子组件实例
    getUserMenuModalRef = (ref) => {
        this.userMenuChild = ref
    }
    // 显示用户菜单子组件弹框
    userMenuModal = (data) => {
        this.userMenuChild.visableModal(data);
    }

    render(){
        return (
            <Fragment>
                <Tabs defaultActiveKey="1">
                    <TabPane tab="用户管理" key="1">
                        <UserManagerPage />
                    </TabPane>
                    <TabPane tab="分组管理" key="2">
                        <GroupManagerPage />
                    </TabPane>
                    <TabPane tab="菜单管理" key="3">
                        <MenuManagerPage />
                    </TabPane>
                </Tabs>
            </Fragment>
        )
    }
}
export default UserManage;